<template>
	<view class="order-container full-container">
		<up-sticky bgColor="#fff">
		    <up-tabs :list="list" lineWidth="30" :itemStyle="{width:'50%',height: '44px'}" @change="changeTab"></up-tabs>
		</up-sticky>
		
		<view class="header bg-white margin radius flex" v-if="orderStatMap">
			<view class="items flex flex-direction">
				<view class="item">
					<text>今日总订单量</text>
					<view class="price">
						<uni-icons custom-prefix="iconfont" type="icon-usdt" color="#333" size="18"></uni-icons>
						<up-count-to :startVal="0" :duration="1000" :endVal="orderStatMap.total"></up-count-to>
					</view>
				</view>
				
				<view class="item">
					<text>今日成交金额</text>
					<view class="price">
						<uni-icons custom-prefix="iconfont" type="icon-usdt" color="#333" size="18"></uni-icons>
						<up-count-to :startVal="0" :duration="1000" :endVal="orderStatMap.sucAmount" separator="," :decimals="2"></up-count-to>
					</view>
				</view>
			</view>
			
			<up-line direction="col" length="200rpx"></up-line>
			
			<view class="items flex flex-direction">
				<view class="item">
					<text>今日成功接单数</text>
					<view class="price">
						<up-count-to :startVal="0" :duration="1000" :endVal="orderStatMap.sucTotal"></up-count-to>
					</view>
				</view>
				
				<view class="item">
					<text>今日成功接单率</text>
					<view class="price">
						<uni-icons custom-prefix="iconfont" color="#333" size="18"></uni-icons>
						<up-count-to :startVal="0" :duration="1000" :endVal="orderStatMap.sucRatio" :decimals="2"></up-count-to>
						<text>%</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="list-wrap bg-white margin">
			<view class="filter padding">
				<view class="cate flex align-center">
					<template v-for="(item,idx) in orderType" :key="item.type">
						<up-text @click="currStatus = item.type" :text="item.name" :size="13" :color="currStatus === item.type ? '#398ade':'#606266'"></up-text>
						<up-line direction="col" length="20rpx" v-if="idx < orderType.length - 1"></up-line>
					</template>
				</view>
				
				<up-search
					v-model="keyword"
					label="订单号"
					shape="square"
					bgColor="#fff"
					borderColor="#f1f1f1"
					:maxlength="64"
					:show-action="false" 
					actionText="搜索"
					@search="onSearch"
					@clear="onSearch"
				>
				</up-search>
			</view>
			
			<view class="list-box">
				<geek-list ref="list" :enabled="false" :api="fetchList" isPage>
					<block #default="{item}">
						<geek-order-item showThumb :item="item" @updateStatus="updateStatus($event,item)"></geek-order-item>
					</block>
				</geek-list>
			</view>
		</view>
	</view>
</template>

<script>
	import _ from 'lodash'
	import { onReachBottom } from '@dcloudio/uni-app'
	import { orderList, allOrderStat, agentpayOrderList } from '@/api/seller/order'
	
	export default{
		data(){
			return {
				currType:1,
				currStatus:0,
				keyword:'',
				orderStatMap:null,
				list:[  
					{ name: '出货单', value:1 },  
					{ name: '进货单', value:2 }
				],
				orderType:[
					{
						type:0,
						name:'全部'
					},
					{
						type:2,
						name:'交易成功'
					},
					{
						type:1,
						name:'待支付'
					},
					{
						type:8,
						name:'申诉单'
					},
					{
						type:9,
						name:'取消支付'
					}
				]
			}
		},
		
		computed:{
			isNewOrder(){
				return this.$store.state.user.isNewOrder || false
			},
			
			updateList(){
				return this.$store.state.user.updateList || null
			}
		},
		
		onShow() {
			this.getAllOrderStat()
			//this.$refs.list.resetList()
		},
		
		methods:{
			changeTab(obj){
				this.currType = obj?.value
			},
			
			updateStatus(val,item){
				item.status = val
				// this.$refs.list.resetList()
			},
			
			onSearch(){
				this.$refs.list.resetList()
			},
			
			getAllOrderStat() {
				//TODO 等待进货单统计接口处理，目前暂时设置为0
				if(this.currType === 2){
					this.orderStatMap = {
						  total:0,
						  amount:0,
						  sucAmount:0,
						  sucTotal:0,
						  sucRatio:0
					}
				} else {
					allOrderStat().then(res=>{
						const data = res.data || null
					  this.orderStatMap = data ? {
						  total:Number(data?.total || 0),
						  amount:Number(data?.amount || 0) / 100,
						  sucAmount:Number(data?.sucAmount || 0) / 100,
						  sucTotal:Number(data?.sucTotal || 0),
						  sucRatio:Number(data?.sucRatio || 0) * 100
					  } : null;
					})
				}
			},
			
			fetchList(data = {}){
				data.orderNo = this.keyword || ''
				data.status = this.currStatus ? this.currStatus : ''
				const MethodFun = this.currType === 1 ? orderList : agentpayOrderList
				return MethodFun(data).then((data) => {
					return {
						...data,
						rows:_.map(data?.rows || [], vo => {
							return {
								...vo,
								type: this.currType === 1 ? 'shipping' : 'purchase',
								icon:this.currType === 1 ? 'icon-chuhuodingdan': 'icon-tianjinhuodan',
								typeName: this.currType === 1 ? '出货': '进货'
							}
						})
					}
				}).finally(() => {
					this.$store.commit('SET_NEWORDER')
				})
			}
		},
		
		watch:{
			currType(){
				this.$refs.list.resetList()
				this.getAllOrderStat()
			},
			
			currStatus(){
				this.$refs.list.resetList()
			},
			
			isNewOrder(val){
				if(val){
					this.$refs.list.resetList()
					this.getAllOrderStat()
				}
			},
			
			updateList(val){
				if(val){
					this.$refs.list.resetList()
					this.getAllOrderStat()
				}
			}
		},
		
		onReachBottom() { 
			this.$refs.list.onScrollToLower()
		},
		
		//下拉刷新
		onPullDownRefresh(){
			this.$refs.list.resetList()
			this.getAllOrderStat()
			uni.stopPullDownRefresh()
		}
	}
</script>

<style lang="scss" scoped>
	.order-container{
		// height: calc(100vh - var(--window-bottom) - var(--status-bar-height) - var(--window-top));
		.header{
			align-items: center;
			border-radius: 30rpx;
			padding: 16rpx;
			margin-bottom: 0;
			
			.items{
				align-items: center;
				justify-content: center;
				flex:1;
				
				.item{
					padding: 10rpx;
					
					&>text{
						color:#666;
					}
					
					.price{
						margin-top: 10rpx;
						text-align: center;
						&::v-deep{
							.u-count-num{
								color:#3c9cff !important;
								font-size: 40rpx !important;
								font-weight: bold !important;
							}
						}
						
						&>text{
							margin-left: 6rpx;
						}
					}
				}
			}
		}
		
		&::v-deep{
			.u-tabs__wrapper__nav{
				background-color: #fff !important;
			}
		}
		
		.list-wrap{
			flex: 1;
			overflow: hidden;
			border-radius: 30rpx;
			margin-top:30rpx;
			display: flex;
			flex-direction: column;
			
			.filter{
				border-bottom: 1px solid #f2f2f2;
				padding-bottom: 28rpx;
				
				.cate{
					margin-bottom: 20rpx;
					.u-text{
						display: flex;
						align-items: center;
						justify-content: center !important;
						padding: 0 10rpx;
						white-space: nowrap;
						width: auto !important;
						flex:1;
						cursor: pointer;
						
						&::v-deep{
							uni-text{
								white-space: nowrap !important;
							}
						}
					}
				}
			}
			
			.list-box{
				flex: 1;
				padding:10rpx 20rpx;
				overflow: hidden;
				
				// .scroll-list{
				// 	height: 100%;
				// }
			}
		}
	}
</style>